﻿FlyTalk.views.HomeView = Ext.extend(Ext.Panel, {

    layout: 'vbox',
	pack: 'start',
	align: 'stretch',
	bodyStyle: 'background-image: url(./images/background.png); width: 100%; height: 100%; position: absolute; top: 0; left: 0',
	scroll: false,

    initComponent: function () {
		
		// template for menu button
		var menuButtonTpl = new Ext.XTemplate(
			'<div class="home-buttons"><img src={src} alt="" width="48" height="48" class="button-image" /><p class="button-label">{btnText}</p></div>'
		);
		
		this.flytalkButton = new Ext.Button({
			data:{
				src: "images/home_feeds.png",
				btnText: "Feeds",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.flytalkButtonTap,
			scope: this
		});
	
		
		this.mytalkButton = new Ext.Button({
			data:{
				src: "images/home_helpout.png",
				btnText: "Help Out",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.mytalkButtonTap,
			scope: this
		});
		
		this.searchButton = new Ext.Button({
			data:{
				src: "images/home_search.png",
				btnText: "Search",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.searchButtonTap,
			scope: this
		});
		
		this.itinmapButton = new Ext.Button({
			data:{
				src: "images/home_myroute.png",
				btnText: "My Route",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.itinmapButtonTap,
			scope: this
		});
		
		this.boredButton = new Ext.Button({
			data:{
				src: "images/home_bored.png",
				btnText: "Bored",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.boredButtonTap,
			scope: this
		});
		
		this.profileButton = new Ext.Button({
			data:{
				src: "images/home_profile.png",
				btnText: "My Profile",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.profileButtonTap,
			scope: this
		});
		
		
		this.serviceButton = new Ext.Button({
			data:{
				src: "images/home_services.png",
				btnText: "Services",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.serviceButtonTap,
			scope: this
		});
		
		this.mapButton = new Ext.Button({
			data:{
				src: "images/flight_button.jpg",
				btnText: "Suggestion Form",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			hidden: true,
			handler: this.mapButtonTap,
			scope: this
		});
		
		this.settingsButton = new Ext.Button({
			data:{
				src: "images/flight_button.jpg",
				btnText: "Settings",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			hidden: true,
			handler: this.settingsButtonTap,
			scope: this
		});
	
		this.topPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			align: 'stretch',
         //   html: 'top',
			flex:1,
			layout: 'hbox',
			items: [this.itinmapButton, this.flytalkButton, this.mytalkButton],
		});
		
		this.midPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			align: 'stretch',
			 flex:1,
//html: 'mid',
			layout: 'hbox',
			items: [this.serviceButton, this.boredButton, this.profileButton, ],
		});
		
		this.bottomPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			 flex:1,
           // html: 'bottom',
		   	pack: 'start',
			align: 'stretch',
			layout: 'hbox',
			items: [
			        //this.itinmapButton, 
			        this.searchButton, 
			      this.mapButton,
			        this.settingsButton
			        ],
		});
		
		
		// toolbar
		this.homeToolbar = new Ext.Toolbar({
			id: 'homeToolbar',
			title: 'FlyTalk',
			dock: 'top',
			layout: 'hbox',
		});
		
		// template for menu button
		var noteButtonTpl = new Ext.XTemplate(
			'<p>{btnText}</p>'
		);
		
		this.noteButton = new Ext.Button({
			html: "Notifications",
			cls: 'noteBtn', // change this in app.css .x-button.noteBtn.x-button-normal 
			handler: this.noteButtonTap,
			badgeText: "",
			style: 'margin: auto;',
			//pack: 'center',
			//align: 'stretch',
			//width: 320,
			width: 130,
			scope: this
		});
		
		this.notePanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
            dock: 'bottom',
            //style: 'margin: auto',
			//align: 'stretch',
			width:320,
			// to change the bar, change the colour here and also in app.css under .x-button.noteBtn.x-button-normal 
			cls: 'notebar', // change this in app.css x-panel.notebar
			items: [
			        this.noteButton, 
			        ],
		});
		
        this.dockedItems = [this.homeToolbar, this.notePanel];
		
		this.items = [this.topPanel, this.midPanel, this.bottomPanel];
		
		FlyTalk.views.HomeView.superclass.initComponent.call(this);
        
    }, // end of init component function

    noteButtonTap: function () {
   
    	Ext.dispatch({
            controller: FlyTalk.controllers.dbController,
            action: 'getNotification',
        });
    	
    },
    
    //TODO - wording
    flytalkButtonTap: function () {
		
        Ext.dispatch({
            controller: FlyTalk.controllers.dbController,
            action: 'getMixedPosts',
            title: 'Feeds',
            tab1: 'All Feeds',
            tab2: 'My Post',
            method1: 'getFlightPost',
            method2: 'getMyPost',
            numtabs: 2,
            prev: 'home',
        });
    },
	
	mytalkButtonTap: function () {
//		 Ext.dispatch({
//	            controller: FlyTalk.controllers.dbController,
//	            action: 'getMixedPosts',
//	            title: 'myFeed',
//	            tab1: 'myTalk',
//	            tab2: 'Help Out',
//	            method1: 'getMyPost',
//	            method2: 'getHelpList', //todo: change this!
//	            numtabs: 2,
//	            prev: 'home',
//	    });
		

        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHelp'
        });
    },
	
	searchButtonTap: function () {
		
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openSearch'
        });
    },
	
	profileButtonTap: function () {
	
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openProfile'
        });
    },
	
	boredButtonTap: function () {
		Ext.dispatch({
            controller: FlyTalk.controllers.dbController,
            action: 'getMixedPosts',
            title: 'Bored',
            tab1: 'Recent Suggestions',
            tab2: 'Popular Suggestions',
            method1: 'getRecentBoredPost',
            method2: 'getPopBoredPost', 
            numtabs: 2,
            prev: 'home',
        });
    },
	
	itinmapButtonTap: function () {
	
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openItinmap'
        });
    },
	
	serviceButtonTap: function () {
	
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openService'
        });
    },
	
	mapButtonTap: function () {
	
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openMap'
        });
    },
	
	settingsButtonTap: function () {
		
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openSettings'
        });
    },
	
});